<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>云墅</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge，chrome=1">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta name="renderer" content="webkit">
    <meta name="baidu-site-verification" content="R9XA5lWxu2"/>
    <meta name="author" content="云墅">
    <meta name="keywords" content="云墅">
    <meta name="description" content="云墅">
    <link rel="stylesheet" href="plugins/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="css/ys.css">
</head>
<body>


<header>
    <div class="container">
        <div class="logo-box">
            <img src="images/logo.png">
        </div>
        <ul class="nav nav-ul">
            <li><a href="index.jsp" target="_blank">首页</a></li>
            <li><a href="reservation.jsp" target="_blank">订房</a></li>
            <li><a href="story.jsp" target="_blank">故事</a></li>
            <li><a href="news.jsp" target="_blank">新闻</a></li>
            <li><a href="about.jsp" target="_blank">关于我们</a></li>
        </ul>
        <ul class="nav nav-right">
            <li>登录</li>
            <li>注册</li>
        </ul>
    </div>
</header>

<div class="heard-box">
    <div class="container">
        <div class="heard-title">
            <img src="images/h1.png">
        </div>
        <img class="heard-img" src="images/h2.png">
    </div>
</div>
<div class="container">
    <a href=""><img src="images/write.png" class="pull-right"></a>
    <div class="tag-box">
        <span class="arrow"></span><span class="title">游记</span>
    </div>

</div>

<div class="travel-wrap container">
    <ul>
        <li class="transition">
            <div class="travel-box">
                <img src="temp/t1.png">
                <div class="title-box transition">
                    <div class="title">
                        动效在以下文字有描述
                    </div>
                    <p class="content">
                        动效：此处鼠标划过图片，黑色背景左边加长到最左边！透明度变为100%！文字向左偏移10%！古往今来，上喜欢修建楼阁或用来妖伏魔
                    </p>
                    <a class="link transition" href="travel_detail.html">
                        查看更多
                    </a>
                </div>
            </div>
        </li>
        <li class="transition">
            <div class="travel-box">
                <img src="temp/t1.png">
                <div class="title-box transition">
                    <div class="title">
                        动效在以下文字有描述
                    </div>
                    <p class="content">
                        动效：此处鼠标划过图片，黑色背景左边加长到最左边！透明度变为100%！文字向左偏移10%！古往今来，上喜欢修建楼阁或用来妖伏魔
                    </p>
                    <a class="link transition" href="travel_detail.html">
                        查看更多
                    </a>
                </div>
            </div>
        </li>
        <li class="transition">
            <div class="travel-box">
                <img src="temp/t1.png">
                <div class="title-box transition">
                    <div class="title">
                        动效在以下文字有描述
                    </div>
                    <p class="content">
                        动效：此处鼠标划过图片，黑色背景左边加长到最左边！透明度变为100%！文字向左偏移10%！古往今来，上喜欢修建楼阁或用来妖伏魔
                    </p>
                    <a class="link transition" href="travel_detail.html">
                        查看更多
                    </a>
                </div>
            </div>
        </li>
        <li class="transition">
            <div class="travel-box">
                <img src="temp/t1.png">
                <div class="title-box transition">
                    <div class="titwrite.pngle">
                        动效在以下文字有描述
                    </div>
                    <p class="content">
                        动效：此处鼠标划过图片，黑色背景左边加长到最左边！透明度变为100%！文字向左偏移10%！古往今来，上喜欢修建楼阁或用来妖伏魔
                    </p>
                    <a class="link transition" href="travel_detail.html">
                        查看更多
                    </a>
                </div>
            </div>
        </li>

    </ul>

</div>

<nav class="page navigation text-center">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <i class="icon i-arrow-left"></i>
            </a>
        </li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li class="omit"><a href="#">...</a></li>
        <li>
            <a href="#" aria-label="Next">
                <i class="icon i-arrow-right"></i>
            </a>
        </li>
    </ul>
</nav>



<footer>
    <div class="about-box">
        <div class="container">
            <div class="about-link">
                联系我们<br>
                <span>Contact us</span>
            </div>
            <div class="contact-box">
                <div class="title">
                    云南创网空港科技有限公司
                </div>
                <p>
                    地点：云南省昆明市盘龙区SOHO俊园11栋2309
                </p>
                <p>
                    电话：400-000-0000
                </p>
                <p>
                    邮编：000000
                </p>
                <p>
                    传真：000-0000000
                </p>
                <p>
                    邮箱：yunnan@qq.com
                </p>
            </div>
            <div class="qr-box">
                <img class="f-logo" src="images/logo.png"><br>
                <img src="temp/qr.png">
                <p>微信公众号</p>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        本站所有制作以及设计由云南创网空港科技有限公司完成         COPYRIGHT (©) 2017.
    </div>
</footer>






<script src="js/jquery.min.js"></script>
<script src="plugins/swiper/js/swiper.min.js"></script>
<script src="js/modal_build.js"></script>
<script src="js/modal_index.js"></script>
<script>
    document.documentElement.style.fontSize = 200 / 1920 * document.documentElement.clientWidth + 'px';
    window.onresize = function () {
        document.documentElement.style.fontSize = 200 / 1920 * document.documentElement.clientWidth + 'px';
    };
</script>
</body>
</html>